<template>
  <div>
    <div class="title-container">
      <img :src="require(`@/assets/img/home/${type}.png`)" alt="" />
      <el-tabs v-model="activeName" @tab-click="tabClick">
        <el-tab-pane
          v-for="(item, index) in options"
          :key="index"
          :label="item"
          :name="item"
        >
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="course-list-container">
      <el-card
        v-for="(item, index) in courseList"
        :key="index"
        class="course-block"
        @click.native="toCourse(item.id)"
      >
        <img :src="item.image" class="image" />
        <div class="course-info">
          <div class="course-name">{{ item.courseName }}</div>
          <div class="course-applay">
            {{ `${item.level} · ${item.enroll}人报名` }}
          </div>
          <div class="course-value">
            <span class="value-span">￥{{ item.price }}</span>
            <span class="add-shopping-cart" @click.stop="addToShopping(item.id)"
              >加购物车</span
            >
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import {
  getNewCourse,
  getGoodCourse,
  getLearnRoute,
  getAdvCourse,
} from "@/services/homeCourse";
import {
  addCartCourse,
  getCartCourse,
  getUserCourseList,
} from "@/services/user";
export default {
  props: ["type", "options"],
  data() {
    return {
      activeName: "",
      courseList: [],
      cartCourse: [],
      hadCourseList: [],
    };
  },
  methods: {
    tabClick(tab) {
      this.courseList = [];
      if (this.type == "新上好课") {
        getNewCourse({ type: tab.label }).then((res) => {
          const data = res.data;
          if (data.data) {
            this.courseList = data.data;
          }
        });
      } else if (this.type == "进站必学") {
        getGoodCourse({ type: tab.label }).then((res) => {
          const data = res.data;
          if (data.data) {
            this.courseList = data.data;
          }
        });
      } else if (this.type == "学习路线") {
        getLearnRoute({ type: tab.label }).then((res) => {
          const data = res.data;
          if (data.data) {
            this.courseList = data.data;
          }
        });
      }
    },
    addToShopping(courseId) {
      let hadFlag = this.hadCourseList.some((item) => item.id == courseId);
      let inCartFlag = this.cartCourse.some((item) => item.id == courseId);
      if (hadFlag || inCartFlag) {
        this.$confirm("", hadFlag ? "课程已购买" : "课程已经在购物车中", {
          confirmButtonText: "去购物车结算",
          cancelButtonText: "继续逛逛",
          type: "success",
          iconClass: "el-icon-success",
          center: true,
        })
          .then(() => {
            this.$myUtils.OpenNewWindow("/shoppingCart/cart", {});
          })
          .catch(() => {});
      } else {
        addCartCourse({ courseId }).then((res) => {
          this.getShoppingCourse();
          this.$confirm("", "添加购物车成功", {
            confirmButtonText: "去购物车结算",
            cancelButtonText: "继续逛逛",
            type: "success",
            iconClass: "el-icon-success",
            center: true,
          })
            .then(() => {
              this.$myUtils.OpenNewWindow("/shoppingCart/cart", {});
            })
            .catch(() => {});
        });
      }
    },
    getShoppingCourse() {
      getCartCourse().then((res) => {
        this.cartCourse = res.data.data || [];
      });
    },
    getHadCourseList() {
      getUserCourseList().then((res) => {
        let had = res.data.data || [];
        this.hadCourseList = had.filter((item) => {
          return !item.free;
        });
      });
    },
    toCourse(id) {
      this.$myUtils.OpenNewWindow("/courseDetail", { id });
    },
  },
  created() {
    this.activeName = this.options[0];
    this.tabClick({ label: this.activeName });
    this.getShoppingCourse();
    this.getHadCourseList();
  },
};
</script>
<style lang="scss" scoped>
.title-container {
  display: flex;
  align-items: center;
  height: 36px;
  font-size: 14px;
  margin-bottom: 30px;
  img {
    height: 30px;
    margin-right: 50px;
    margin-top: 5px;
  }
  ::v-deep .el-tabs {
    .el-tabs__header {
      margin: 0;
      .el-tabs__nav-wrap {
        &::after {
          display: none;
        }
      }
    }
  }
}
.course-list-container {
  height: 568px;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  ::v-deep .course-block {
    width: 270px;
    height: 272px;
    border-radius: 8px;
    margin-bottom: 20px;
    margin-right: 20px;
    cursor: pointer;
    &:nth-child(4n) {
      margin-right: 0;
    }
    .el-card__body {
      display: flex;
      flex-direction: column;
      padding: 0;
      .image {
        width: 100%;
        height: 152px;
        margin-bottom: 8px;
      }
      .course-info {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 0 8px;
        .course-name {
          width: 254px;
          height: 40px;
          line-height: 20px;
          font-size: 14px;
          margin-bottom: 8px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .course-applay {
          height: 18px;
          width: 254px;
          margin-bottom: 8px;
          font-size: 12px;
          color: #9199a1;
        }
        .course-value {
          height: 18px;
          width: 254px;
          margin-bottom: 8px;
          font-size: 12px;
          color: #9199a1;
        }
        .course-value {
          display: flex;
          justify-content: space-between;
          height: 20px;
          color: $primary-color;
          .value-span {
            font-weight: bold;
          }
          .add-shopping-cart {
            position: relative;
            &::before {
              content: "";
              display: block;
              position: absolute;
              transform: translate(-110%, 10%);
              background: url("~@/assets/icon/courseSelect/购物车.png") 0 0
                no-repeat;
              width: 12px;
              height: 12px;
            }
          }
        }
      }
    }
  }
}
</style>